<template>
    <div class="contacts">
        <div class="flex">
            <el-button type="primary" round size="mini" icon="el-icon-user" @click="addFriend">添加好友</el-button>
            <el-badge :value="unOpCount" :max="99" v-if="unOpCount > 0">
                <el-button type="primary" round size="mini" icon="el-icon-bell" @click="showMyApply">申请通知</el-button>
            </el-badge>
            <el-button type="primary" round size="mini" icon="el-icon-bell" @click="showMyApply" v-else>申请通知</el-button>
        </div>
        <div class="flex">
            <el-button type="primary" round size="mini" icon="el-icon-plus" @click="addChatGroup">创建群聊</el-button>
            <el-button type="primary" round size="mini" icon="el-icon-plus" @click="addGroup">创建分组</el-button>
        </div>

        <el-tabs v-model="tabsActive">
            <el-tab-pane label="好友" name="0">
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item :title="item.name" :name="index" v-for="item, index in groupList" :key="index"
                        v-loading="groupLoading">
                        <template slot="title">
                            <div class="flex-jus">
                                <div>{{ item.name }}</div>
                                <div class="margin-right">
                                    <i class="el-icon-edit" @click.stop="editGroup(item)"></i>
                                </div>
                            </div>
                        </template>
                        <div class="item" v-for="child, index2 in item.userList" :key="index2"
                            @click="getContactsInfo(child.contactsId)">
                            <div class="avatar">
                                <el-avatar :src="child.avatar"></el-avatar>
                            </div>
                            <div class="info">
                                <span>{{ child.nickname }}({{ child.username }})</span>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="群聊" name="1">暂未开发</el-tab-pane>
        </el-tabs>

        <el-dialog title="添加好友/群聊" :visible.sync="isAdd" width="30%" :before-close="handleClose">
            <div v-if="addProgress == 1">
                <el-input v-model="searchContent" placeholder="输入账号/群号搜索" @keypress.enter.native="search"
                    class="search-input"></el-input>
                <div v-loading="loading" class="min-h">
                    <div class="item1" v-for="item, index in resList.userList" :key="index">
                        <div class="item1">
                            <div class="avatar">
                                <el-avatar :src="item.avatar"></el-avatar>
                            </div>
                            <div class="info">
                                <span>{{ item.nickname }}({{ item.username }})</span>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary" size="mini" round @click="sendApply(item, 1)">添加好友</el-button>
                        </div>
                    </div>
                    <div class="item1" v-for="item, index in resList.chatList" :key="index">
                        <div class="item1">
                            <div class="avatar">
                                <el-avatar :src="item.coverImage"></el-avatar>
                            </div>
                            <div class="info">
                                <span>{{ item.name }}</span>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary" size="mini" round>添加群聊</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="addProgress == 2">
                <div class="item1" v-if="applyType == 1">
                    <div class="avatar">
                        <el-avatar :src="findUserInfo.avatar"></el-avatar>
                    </div>
                    <div class="info">
                        <span>{{ findUserInfo.nickname }}({{ findUserInfo.username }})</span>
                    </div>
                </div>
                <div class="item1" v-if="applyType == 2">
                    <div class="avatar">
                        <el-avatar :src="findUserInfo.coverImage"></el-avatar>
                    </div>
                    <div class="info">
                        <span>{{ findUserInfo.name }}({{ findUserInfo.id }})</span>
                    </div>
                </div>
                <div>
                    <el-form ref="form" :model="apply" label-width="80px">
                        <el-form-item label="验证消息">
                            <el-input v-model="apply.content" type="textarea" rows="2" resize="none"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="apply.note"></el-input>
                        </el-form-item>
                        <el-form-item label="分组" v-show="applyType == 1">
                            <el-select v-model="apply.groupId" placeholder="请选择分组">
                                <el-option :label="itemGroup.name" :value="itemGroup.id"
                                    v-for="itemGroup, index in groupList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div class="apply-btn">
                        <el-button size="medium" @click="toBack(1)">返回</el-button>
                        <el-button type="primary" size="medium" @click="submitApply" :loading="submitLoading">发送</el-button>
                    </div>
                </div>
            </div>

        </el-dialog>

        <el-dialog title="申请通知" :visible.sync="showMyApplyDialog" width="30%">
            <div v-if="applyProgress == 1">
                <div class="item" v-for="item, index in applyList" :key="index">
                    <div class="item">
                        <div class="avatar">
                            <el-avatar :src="item.avatar"></el-avatar>
                        </div>
                        <div class="info">
                            <div>
                                {{ item.nickname }}({{ item.username }})
                            </div>
                            <div>
                                <el-tooltip effect="light" :content="item.content" placement="top">
                                    <span class="limit">
                                        {{ item.content }}
                                    </span>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.status == 1">
                        <el-button size="mini" @click="changeApplyStatus(item.id, 3)">拒绝</el-button>
                        <el-button size="mini" type="primary" @click="changeApplyProgress(item, item.type)"
                            :loading="acceptApplyLoading">同意</el-button>
                    </div>
                    <div v-else-if="item.status == 2">
                        <span>已同意</span>
                    </div>
                    <div v-else-if="item.status == 3">
                        <span>已拒绝</span>
                    </div>
                </div>
                <div v-if="applyList.length == 0">
                    <el-empty description="无消息通知"></el-empty>
                </div>
            </div>
            <div v-else-if="applyProgress == 2">
                <div class="item1" v-if="applyType == 1">
                    <div class="avatar">
                        <el-avatar :src="findUserInfo.avatar"></el-avatar>
                    </div>
                    <div class="info">
                        <span>{{ findUserInfo.nickname }}({{ findUserInfo.username }})</span>
                    </div>
                </div>
                <div class="item1" v-if="applyType == 2">
                    <div class="avatar">
                        <el-avatar :src="findUserInfo.coverImage"></el-avatar>
                    </div>
                    <div class="info">
                        <span>{{ findUserInfo.name }}({{ findUserInfo.id }})</span>
                    </div>
                </div>
                <div>
                    <el-form ref="form" :model="apply" label-width="80px">
                        <el-form-item label="备注">
                            <el-input v-model="apply.note"></el-input>
                        </el-form-item>
                        <el-form-item label="分组" v-show="applyType == 1">
                            <el-select v-model="apply.groupId" placeholder="请选择分组">
                                <el-option :label="itemGroup.name" :value="itemGroup.id"
                                    v-for="itemGroup, index in groupList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div class="apply-btn">
                        <el-button size="medium" @click="toBack(2)">返回</el-button>
                        <el-button type="primary" size="medium"
                            @click="changeApplyStatus(findUserInfo.id, 2)">确定</el-button>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" v-show="applyProgress == 1">
                <el-button size="mini" type="danger" @click="deleteAllOpApply" :disabled="applyList == 0">全部删除</el-button>
            </span>
        </el-dialog>

        <el-dialog title="创建分组" :visible.sync="addGroupDialog" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="apply" label-width="80px">
                <el-form-item label="分组名">
                    <el-input v-model="apply.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addGroupDialog = false">取 消</el-button>
                <el-button type="primary" @click="sumbitAddGroup">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="编辑分组" :visible.sync="editGroupDialog" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="apply" label-width="80px">
                <el-form-item label="分组名">
                    <el-input v-model="apply.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editGroupDialog = false">取 消</el-button>
                <el-button type="danger" @click="updateGroup(2)">删 除</el-button>
                <el-button type="primary" @click="updateGroup(1)">修 改</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "contacts-list",
    data() {
        return {
            tabsActive: "0",
            activeName: "0",
            // 是否展示添加页面
            isAdd: false,
            showMyApplyDialog: false,
            addGroupDialog: false,
            editGroupDialog: false,
            // 搜索内容
            searchContent: "11111111",
            // 搜索出来的用户ID
            findUserInfo: null,
            // 搜索结果
            resList: [],
            // 是否加载
            submitLoading: false,
            loading: false,
            groupLoading: false,
            acceptApplyLoading: false,
            // 进度
            addProgress: 1,
            applyProgress: 1,
            // 申请信息
            apply: {},
            // 申请类型 1:好友 2：群聊
            applyType: null,
        }
    },
    mounted() {
        this.getContactsAppLyList()
        this.init()
    },
    methods: {
        init() {
            if (this.tabsActive == "0") this.getGroupList()
            else if (this.tabsActive == "1") this.getChatGroupList()
        },
        async getGroupList() {
            this.groupLoading = true
            let res = await this.$store.dispatch('getGroupList')
            this.groupLoading = false
            if (!res.success) this.$global.resError(res)
        },
        async getContactsAppLyList() {
            let res = await this.$store.dispatch("getContactsAppLyList")
            if (!res.success) this.$global.resError(res)
        },
        addFriend() {
            this.isAdd = true
        },
        async search() {
            if (this.searchContent == null || this.searchContent.trim() == '') {
                return;
            }
            this.loading = true
            let res = await this.$store.dispatch("searchContacts", {
                searchContent: this.searchContent
            })
            this.loading = false
            if (res.success) {
                this.$message.success(res.message)
                this.resList = res.data
            }
            else this.$global.resError(res)
        },
        sendApply(user, type) {
            this.findUserInfo = user
            this.applyType = type
            this.addProgress = 2
            this.getGroupList()
        },
        toBack(idx) {
            if (idx == 1) {
                this.addProgress = 1;
                this.apply = {}
            }
            else if (idx == 2) {
                this.applyProgress = 1;
                this.apply = {}
            }

        },
        handleClose(done) {
            done();
            this.resList = []
            this.searchContent = null;
            this.toBack();
        },
        async submitApply() {
            if (this.apply.content == null || this.apply.content.trim() == "" || this.apply.note == null ||
                this.apply.note.trim() == "" || this.apply.groupId == null) {
                this.$message.warning("请正确填写")
                return
            }
            this.submitLoading = true
            let res = await this.$store.dispatch("submitApply", {
                type: this.applyType,
                content: this.apply.content,
                note: this.apply.note,
                groupId: this.apply.groupId,
                targetId: this.findUserInfo.id,
                targetUsername: this.applyType == 1 ? this.findUserInfo.username : null
            })
            this.submitLoading = false
            if (res.success) {
                this.$message.success(res.message)
                this.getGroupList()
            }
            else this.$global.resError(res)
        },
        showMyApply() {
            this.showMyApplyDialog = true
        },
        async changeApplyStatus(applyId, status) {
            this.acceptApplyLoading = true
            let res = await this.$store.dispatch("changeApplyStatus", {
                id: applyId,
                status: status,
                note: this.apply.note,
                groupId: this.apply.groupId
            })
            this.acceptApplyLoading = false
            if (res.success) {
                this.$message.success(res.message)
                this.getContactsAppLyList()
            }
            else this.$global.resError(res)
        },
        async getContactsInfo(id) {
            this.$emit("busQueryUserLoading", true)
            let res = await this.$store.dispatch('getContactsInfo', id);
            this.$emit("busQueryUserLoading", false)
            if (res.success) this.$emit('busContactsInfo', res.data);
            else this.$global.resError(res)
        },
        changeApplyProgress(item, type) {
            this.applyType = type;
            this.findUserInfo = item;
            this.applyProgress = 2;
        },
        async getChatGroupList() {

        },
        addGroup() {
            this.apply = {}
            this.addGroupDialog = true
        },
        async sumbitAddGroup() {
            let res = await this.$store.dispatch("addGroup", this.apply)
            if (res.success) {
                this.$message.success(res.messgae)
                this.init()
            }
            else this.$global.resError(res)
        },
        addChatGroup() {
            this.$message.info("暂未开发")
        },
        editGroup(item) {
            this.apply = item
            this.editGroupDialog = true
        },
        updateGroup(idx) {
            if (idx == 1) {
                this.submitUpdateGroup({
                    id: this.apply.id,
                    name: this.apply.name
                })
            }
            else {
                this.submitUpdateGroup({
                    id: this.apply.id,
                    status: 2
                })
            }
        },
        async submitUpdateGroup(data) {
            let res = await this.$store.dispatch('updateGroup', data)
            if (res.success) {
                this.$message.success(res.message)
                this.init()
            }
            else this.$global.resError(res)
        },
        async deleteAllOpApply() {
            let res = await this.$store.dispatch('deleteAllOpApply')
            if (res.success) {
                this.$message.success(res.message)
                this.getContactsAppLyList()
            }
            else this.$global.resError(res)
        }
    },
    computed: {
        groupList() {
            return this.$store.state.im.groupList || []
        },
        applyList() {
            return this.$store.state.im.applyList || []
        },
        unOpCount() {
            let idx = 0;
            this.applyList.forEach(item => {
                if (item.status == 1) idx++;
            })
            return idx;
        },
    },
    watch: {
        tabsActive(newVal, oldVal) {
            if (newVal == oldVal) return
            this.init()
        },
    }
}
</script>

<style scoped>
.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    margin: 10px 0;
    padding: 0 7px;
    margin-right: 20px;
    cursor: pointer;
}

.item:hover {
    background-color: #F2F6FC;
    border-radius: 5px;
}

.avatar {
    width: 40px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    justify-content: center;
}

.info {
    width: calc(100% - 50px);
}

.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.item1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 7px;
    margin: 10px 0;
    cursor: pointer;
}

.item1:hover {
    background-color: #F2F6FC;
    border-radius: 5px;
}

.loading-div {
    height: 50px;
}

.min-h {
    min-height: 80px;
}

::v-deep .el-dialog__body {
    padding: 0 20px;
    padding-bottom: 20px;
}

.search-input {
    margin-top: 20px;
}

.apply-btn {
    text-align: center;
    margin-bottom: 20px;
}

.contacts {
    padding-right: 20px;
}

.limit {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.flex-jus {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.margin-right {
    margin-right: 10px;
}
</style>